<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div style="margin-top: 20px;">

    <div class="search_block">
        搜索职位：
        <div class="layui-inline">
            <input class="layui-input" name="s_roleName" id="s_roleName" placeholder="输入职位" autocomplete="off">
        </div>
        <button class="layui-btn" id="search_btn" data-type="search">搜索</button>
        <label class="tip">${stateMsg}</label>
        <button class="layui-btn" style="float: right;padding-right: 10px" id="add_btn" data-type="add">添加职位</button>
    </div>

    <table class="layui-hide" id="roles_table" lay-filter="roles_table"></table>

    <%--操作条--%>
    <script type="text/html" id="tool_bar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="author">授权</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <script>
        layui.use(['table','layer'], function(){
            var table = layui.table,layer=layui.layer,$=layui.jquery;
            table.render({
                elem: '#roles_table'
                ,url:'/back/role/load'
                ,cols: [[
                    {field:'roleName', width:120, title: '职位' ,sort: true}
                    ,{field:'permissionStr',width:300,title:'拥有权限'}
                    ,{field:'workerStr',width:300,title:'拥有该角色的工人'}
                    ,{field:'detail', title: '详细介绍'}
                    ,{fixed: 'right', width:178, align:'center', toolbar: '#tool_bar'}
                ]]
                ,done:function () {
                }
                ,id:'id'
                ,page: true
                ,limit:10
            });

            //操作按钮监听模块
            table.on('tool(roles_table)',function (obj) {
                var data=obj.data;
                var event=obj.event;
                if(event=='del'){
                    if(data.id==1){
                        layer.msg("管理员不可改动");
                        return;
                    }
                    layer.confirm('要删除这个角色?', function(index){
                        $.post("${pageContext.request.contextPath}/back/role/delete",{id:data.id},function (state) {
                            var result=eval('('+state+')');
                            if(result){
                                layer.msg("删除成功");
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("删除失败");
                                layer.close(index);
                            }
                        });

                    });
                }
                if(event=='edit'){
                    if(data.id==1){
                        layer.msg("管理员不可改动");
                        return;
                    }
                    layer.open({
                        title:'修改页面'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['330px','320px']
                        , content: $('#role_form')
                        ,success: function(layero, index){
                            $('#role_form').attr('action','${pageContext.request.contextPath}/back/role/modifyInfo');
                            $('#roleId').val(data.id);
                            $('#roleName').val(data.roleName);
                            $('#detail').text(data.detail);
                            $('#btn').text("提交修改");
                        }
                    });
                }
                if(event=='author'){
                        layer.open({
                            type: 2,
                            title:'个人信息',
                            skin: 'layui-layer-lan',
                            area:['420px','600px'],
                            content: ["${pageContext.request.contextPath}/back/author/permission/get?roleId="+data.id+"&roleName="+data.roleName,'no'],
                            btn:'关闭页面',
                            yes:function (index) {
                                // layer.close(index);
                                location.reload();
                            }
                        });
                }
            });
            
            //搜索添加模块
            var $ = layui.$, active = {
                search: function(){
                    var s_roleName = $('#s_roleName').val();
                    table.reload('id', {
                        where: {
                            s_roleName:s_roleName
                        }
                        ,page: {
                            curr:1
                        }

                    });
                }
                ,add:function () {
                    layer.open({
                        title:'添加新职位'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['330px','320px']
                        , content: $('#role_form')
                        ,success: function(layero, index){
                            $('#role_form').attr('action','${pageContext.request.contextPath}/back/role/add');
                            $('#roleName').val("");
                            $('#detail').text("");
                            $('#btn').text("提交添加");
                        }
                    })
                }
            };

            $('#search_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('#add_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });


        layui.use(['form', 'layedit'],function () {
            var form = layui.form;

            form.verify({
                roleName:function (value) {
                    if(value==""){
                        return '职位名不能为空';
                    }
                }
            });

            form.on('submit(check)', function(data){
                return true;
            });


        });
    </script>

</div>

    <form id="role_form" style="display: none" class="layui-form" action="#" method="post">
        <input type="hidden" id="roleId" name="id"/>
        <div class="info_form_body">
            <div class="layui-form-item">
                <label class="layui-form-label">职位名称:</label>
                <div class="layui-input-block">
                    <input id="roleName" type="text" name="roleName"  lay-verify="roleName" placeholder="新职位名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详细介绍:</label>
                <div class="layui-input-block">
                    <textarea id="detail" name="detail" placeholder="详细介绍" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="btn" lay-submit="" lay-filter="check" class="layui-btn"></button>
                </div>
            </div>
        </div>
    </form>